<h1 class="sr-only" i18n>Notifications</h1>
<div class="header">
  <a routerLink="/my-account/settings" fragment="notifications" i18n>
    <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
    Notification preferences
  </a>

  <button class="btn" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
    <ng-container *ngIf="hasUnreadNotifications()">
      <my-global-icon iconName="inbox-full" aria-hidden="true"></my-global-icon>

      <span i18n>Mark all as read</span>
    </ng-container>

    <ng-container *ngIf="!hasUnreadNotifications()">
      <my-global-icon iconName="circle-tick" aria-hidden="true"></my-global-icon>

      <span i18n>All read</span>
    </ng-container>
  </button>
</div>

<my-user-notifications #userNotification></my-user-notifications>
